<script setup>
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { request } from "@/common/http";
import { ApiUrl } from "@/common/ApiUrl";
import { jumpPage, Toast } from "@/utils";

const merchant = ref({
	type: 1,
})

let merchantList = ref([]);
onShow(() => {
	// 获取分账商户数据
	getMerchantList();
})

// 获取分账商户数据
const getMerchantList = () => {
	request({
		url: `${ApiUrl.MerchantUrl}/findMerchantList`,
		method: "post",
		data: {
			...merchant.value
		}
	}).then(res => {
		if (res.status == 1  || res.data.status == 1) {
			Toast(res.msg != null ? res.msg : res.data.msg);
		} else {
			merchantList.value = res.data.data;
		}
	})
}
</script>

<template>
	<view class="auto_account">
		<view class="tip">分账提示：分账商户必须在同一个渠道</view>
		<view class="select_box">
			<view class="select_item merchant" @click="jumpPage('/pages/user/AutoAccounting/Agent')">
				<view>分账商户</view>
				<view>共{{ merchantList.length }}个商户</view>
			</view>
			<view class="select_item profit" @click="jumpPage('/pages/user/AutoAccounting/Profit')">
				<view>分账收益</view>
				<view>收益统计</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.auto_account {
	.tip {
		width: 750rpx;
		height: 80rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		color: #FF6619;
		box-sizing: border-box;
		padding-left: 40rpx;
	}
	.select_box {
		display: flex;
		justify-content: space-between;
		margin: 24rpx 32rpx 0;
		.select_item {
			width: 330rpx;
			height: 306rpx;
			box-sizing: border-box;
			padding: 24rpx 0 0 24rpx;
			&.merchant {
			  background: url("/static/image/user/account_merchant.png") 0/100% 100% no-repeat;
			}
			&.profit {
			  background: url("/static/image/user/account_profit.png") 0/100% 100% no-repeat;
			}
			view {
				&:nth-child(1) {
					font-weight: 500;
					font-size: 28rpx;
					line-height: 48rpx;
					color: #141414;
				}
				&:nth-child(2) {
					font-size: 24rpx;
					line-height: 48rpx;
					color: #141414;
				}
			}
		}
	}
}
</style>